Utility First

予めUI Frameworkによって定義された汎用的なスタイルクラスやプロパティを組み合わせてUIを構築する手法

課題が解消されたinline styles インラインスタイル風な記述ができる

観点

人力CSS Architecture 設計手法の全ページ用bundle CSS > Utility Firstな全ページ用bundle CSS > 各ページごとに用意されたbundle CSS

Design Tokensや独自スタイルの設定しやすさ

Web Standardsへのキャッチアップ速度

Design デザインチームとのコミュニケーション

Utility Firstを破ったDesign デザインに対し、どう対処するか？

Chakra UIだとEmotionありで、runtimeありなスタイルでPerformanceに影響ある。

Devtoolでデバッグしにくくない？

独自記法の入力補完あるか？

賛否両論

間違い: CSSを覚えなくていい

utility classは、ほとんどCSSの値と名前同じ

むしろ、CSSを理解している人からは、独自utility classの名前を覚えるのが面倒

uiライブラリのclass名覚えても知識の携帯性 portability低いし

実際はComponent コンポーネント codeの命名を行うので、それほど開放されたわけでない。

意見/感想

完全開放みたいな意見言っている人もいるが、一定期間メンテしたり、多くの人が触るプロダクトの場合、全てinline styles インラインスタイルだと可読性 readabilityが下がるので、以下を行ってほしい。

変数化、パターン化して命名

Tailwind CSS作者の人の記事

ノーマルなCSSからTailwind CSSの考え方に遷移していく流れが面白い

Tailwind CSS公式の基本コンセプト記事